<template>
  <div class="wrapper"
       border-top-bottom-1px>
    <div class="header">
      <h2 class="title">{{title}}</h2>
      <div class="more">
        {{more}}项优惠
      </div>
    </div>
    <swiper :options="swiperOption"
            v-if="more">
      <!-- slides -->
      <swiper-slide v-for="(item, index) in discounts"
                    :key="item.id">
        <div class="roll-item">
          <div class="discounts-info">
            <div class="price">
              <div>￥</div>
              {{item.money}}
            </div>
            <div class="desc">满{{item.tap_amount}}可用</div>
            <div class="time">有效期至 {{endTime[index]}}</div>
            <div class="get"
                 @click="handleGetDiscounts(item)">领取</div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { isLogin } from '@/assets/js/isLogin'
import { Toast } from 'vant'
import { mapMutations } from 'vuex'

export default {
  name: 'DetailDiscounts',
  props: {
    title: {
      type: String,
      default: '优惠信息'
    },
    discounts: {
      type: Array
    }
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 12,
        grabCursor: true,
        pagination: '.swiper-pagination',
        centeredSlides: true
        // autoplay: 3000
      }
    }
  },
  methods: {
    initDisCounts () {
      this.changeDisCounts(this.discounts)
    },
    getDiscounts (sellerId, couponId) {
      this.$api.discounts.getDiscounts({ seller_id: sellerId, coupon_id: couponId })
        .then(this.getDiscountsSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    currentPage (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    },
    handleGetDiscounts (item) {
      const loginStatus = this.getLoginStatus
      const sellerId = item.seller_id
      const couponId = item.id
      const path = this.$route.fullPath
      if (!loginStatus) {
        this.getDiscounts(sellerId, couponId)
      } else {
        this.$localStorage.remove('loginStatus')
        this.$localStorage.remove('loginDate')
        Toast({
          message: '登陆中...',
          duration: 1000,
          forbidClick: true
        })
        isLogin(path, this.getDiscounts(sellerId, couponId))
      }
    },
    getDiscountsSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const msg = res.msg
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      } else {
        const msg = res.msg
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      }
    },
    ...mapMutations({
      changeDisCounts: 'changeDisCounts'
    })
  },
  computed: {
    getLoginStatus () {
      const loginStatus = this.$localStorage.get('loginStatus')
      return loginStatus == null
    },
    more () {
      return this.discounts.length
    },
    endTime () {
      const result = []
      this.discounts.map((item) => {
        let calculateTime = item.end_time
        calculateTime = calculateTime.substring(0, 10).replace(/-/g, '/')
        result.push(calculateTime)
      })
      return result
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initDisCounts()
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .swiper-slide
  width 338px

.wrapper
  margin-top 14px
  background-color $bgcWh
  padding-top 14px
  padding-bottom 14px
  box-sizing border-box

  .header
    padding()
    display flex
    justify-content space-between

  .title
    font-size $fzThird
    color $fzColor
    line-height 65px

  .more
    font-size $smallFz
    color $graySecond
    padding-top 6px

    .more-icon
      font-size 40px
      vertical-align -6px

  .roll-item
    width 338px
    height 194px
    background-color #FF4749
    color $whiteFzClor
    font-size $smallFz
    position relative
    padding-top 32px
    padding-bottom 31px
    padding-left 24px
    padding-right 32px
    box-sizing border-box
    z-index 2
    overflow hidden
    position relative

    &:before
      content ''
      position absolute
      width 103%
      height 105%
      border 10px dotted $bgcWh
      box-sizing border-box
      top -5px
      left -5px
      z-index -1

    .discounts-info
      .price
        font-size 52px
        line-height 52px
        display flex
        flex-basis 0
        max-width 160px
        ellipsis()

        div
          font-size $smallFz
          margin-right 8px
          margin-top 10px

      .desc
        margin-bottom 16px
        max-width 150px
        ellipsis()

      .time
        opacity 0.7
        max-width 100%
        ellipsis()

      .get
        width 102px
        height 58px
        background rgba(255, 255, 255, 1)
        border 2px solid rgba(250, 50, 53, 1)
        border-radius 29px
        position absolute
        top 50px
        right 24px
        font-size $fzFourthly
        font-weight 500
        color rgba(255, 71, 73, 1)
        display flex
        justify-content center
        align-items center

  &:nth-last-of-type(1)
    border-bottom none
    border-image none

  .icon
    font-size 40px
    color $graySecond
</style>
